<template>
    <div>
      <div v-for="(item, index) in list" :key="index">
        <div class="listitem" >
          <span class="iconfont icons" >&#xe607;</span>
          {{item.title}}
        </div>
        <div v-if="item.children" class="itemchildren">
          <detaillist :list="item.children"></detaillist>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'detaillist',
  props: {
    list: Array
  }
}
</script>

<style scoped>
  .listitem{
    padding-left: 10px;
    line-height: 35px;
    border-bottom: 1px solid #f4f4f4;

  }
  .icons{
    color: #66afff;
  }
  .itemchildren{
    padding-left: 12px;
  }
</style>
